HTML Form Elements
This chapter describes all the different HTML form elements.
The HTML <form> Elements
The HTML <form> element can contain one or more of the following form elements:
<input><label><select><textarea><button><fieldset><legend><datalist><output><option><optgroup>
The <input> Element
The <input> element is one of the most used form elements.
Depending on the value of the 'type' property, the <input> element can be presented in a variety of ways.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
The <label> Element
The <label> element defines a label for several form elements.
Users of screen readers can benefit from the "label" element since the screen reader will read the label aloud when the user focuses on the input element.
Because the text within the "label" element toggles the radio button or checkbox when the user clicks it, the "label" element also aids users who have trouble clicking on tiny areas (like radio buttons or checkboxes).
The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
The <select> Element
The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
<option value="fiat" selected>Fiat</option>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea
>
The rows attribute defines the number of lines that are shown in a text area.
The visible width of a text section is determined by the cols attribute.
Using CSS, you can optionally specify the text area's size:
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea
>
The <button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
The <fieldset> and <legend> Elements
Use the <fieldset> element to group similar data together in a form.
A caption for the <fieldset> element is defined by the "legend" element.
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="John" /><br />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Doe" /><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
The <datalist> Element
A set of pre-defined choices for a <input> element are specified by the <datalist> element.
As they enter data, users will see a drop-down list of the pre-defined alternatives.
The list attribute of the <input> element must make reference to the datalist element's id attribute.
<form action="/action_page.php">
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>
</form>